<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <!-- 用于设置组件的默认展开项:default-openeds="['0', '1']" -->
        <!-- 用于设置组件的默认激活项:default-active="$route.path" -->
        <el-menu router :default-active="$route.path"><!-- 开启路由模式 -->
          <el-sub-menu v-for="(parentRoute, parentIndex) in $router.options.routes" :key="parentIndex"
            :index="parentIndex.toString()">
            <!-- 一级子菜单标题 -->
            <template #title><el-icon>
                <message />
              </el-icon>{{ parentRoute.name }}</template>
            <!-- 二级菜单项 -->
            <el-menu-item v-for="(childRoute, childIndex) in parentRoute.children" :key="childIndex"
              :index="getFullPath(parentRoute.path, childRoute.path)">
              {{ childRoute.name }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
import { Message, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

// 必须引入useRoute获取当前路由
const $route = useRoute()

// 关键：计算完整路由路径的工具函数
const getFullPath = (parentPath, childPath) => {
  // 处理父路径为根目录的情况（避免出现//）
  if (parentPath === '/') {
    return `/${childPath}`
  }
  // 拼接正常父子路径
  return `${parentPath}/${childPath}`
}
</script>